<template>
  <el-dialog title="个人信息" :visible.sync="visible" width="30%" @close="closeHandle">
    <el-form :model="user" ref="userForm" :rules="rules" :label-width="formLabelWidth">
      <el-row :gutter="20">
        <el-form-item v-show="false"  prop="id">
          <el-input  v-model="user.id" ></el-input>
        </el-form-item>

        <el-col :span="12">

          <el-form-item label="登录名" prop="username">
            <el-input :disabled="user.id ? true:false"  v-model="user.username" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-show="!user.id" label="密码" prop="password" :class="{ 'is-required': !user.id }">
            <el-input  v-model="user.password"  auto-complete="off"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item label="显示名" prop="displayName">
            <el-input  v-model="user.displayName" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input  v-model="user.email" auto-complete="off"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item label="电话" prop="phone">
            <el-input  v-model="user.phone" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织" prop="departmentName">
            <el-popover
              ref="popover"
              placement="bottom-end"
              width="200"
              v-model="treeShow"
              trigger="click">
              <div style="text-align: right; margin: 0">
                <el-tree
                  :data = "treeData"
                  node-key="id"
                  @node-click="setSelectedTreeNode"
                  ref="tree"
                  accordion
                  :props="defaultProps">
                   <span slot-scope ="{ node, data }">
                          <span>{{ node.label }}</span>
                      </span>
                </el-tree>
              </div>
            </el-popover>
            <el-input disabled v-model="user.departmentName" v-popover:popover></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item v-show="user.id"  label="是否可用" prop="disabled">
            <el-switch  v-model="user.disabled"> </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="submitEdit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {saveOrUpdate,getUserInfoByUserNameOrId} from '@/api/sys/user/';
  import {getDepartmentListPage } from '@/api/sys/department/';
  //import { getAllRoles } from '@/api/sys/role/';
  export default {
    data() {
      var validatePassword = (rule, value, callback) => {
        if (!this.user.id && !value) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
      return {
        treeData:[{
        }],
        treeShow:false,
        imageUrl: '',
        visible: false,
        user:{
          disabled: true
        },
        defaultProps: {
          children: 'children',
          label: 'name',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
              return false;
            }else{
              return true;
            }
          }
        },
        formLabelWidth:'80px',
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
          ],
          phone: [
            {required: true, message: '请输入电话', trigger: 'blur'},
            {pattern: /^1[3-9]\d{9}$/,type:'string', message: '请输入正确的电话', trigger: 'blur,change'}
          ],
          password:[
            { validator: validatePassword, trigger: 'blur'},
            {min:5,max:10,message:'密码长度大于5小于10',trigger:'change'}
          ],
          departmentName:[
            { required: true, message: '请选择组织', trigger: 'blur'}
          ],
          displayName:{ required: true, message: '请输入姓名', trigger: 'blur'}
        },
      }
    },
    methods: {
      init(row){
        let that =this;
        this.visible =true;
        this.$nextTick(()=> {
          that.loadingDepartmentTree(that.user.departmentId);
          if(row != undefined && row.id){
            that.user = Object.assign({},row);
          }
        })

      },
      setSelectedTreeNode(data,node,tree){
        if(node){
          this.user.departmentId=node.data.id;
          this.user.departmentName=node.data.name;
          this.treeShow=false;
        }

      },
      loadingDepartmentTree(departmentId) {
        let that = this;
        getDepartmentListPage({}).then(function (result) {
          let {data,code} = result.data;
          that.treeData= [];
          data.forEach((item) =>{
            that.treeData.push(item);
          });

          if(departmentId){
            this.setSelectedTreeNode(null,this.$refs.tree.getNode(departmentId),null);
          }
        }).catch(function (error) {

        });
      },

      closeHandle(){
        this.$refs['userForm'].resetFields();
        this.visible=false;

      },
      submitEdit(){
          let that = this;
        this.$refs.userForm.validate(function(valid){
          if(valid){

            saveOrUpdate(that.user).then(function (result) {
              let {code,msg} =result.data;
              if(code == '0'){
                that.$message({
                  type: 'success',
                  message: msg
                });
                that.visible = false;
                that.$emit('refreshDataList');
              }else{
                that.$message.error('执行失败,'+msg);
              }
            }).catch(function (error) {
              // that.$message.error('执行失败,未知异常请联系管理员');
            });
          }
        });
      }
    }



  }

</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
